<template>
  <div
    class="btn"
    :class="{
      primary: type === 'primary',
      success: type === 'success',
      danger: type === 'danger',
    }"
  >
    {{ text }}
  </div>
</template>
<script>
export default {
  name: "",
  props: ["text", "type"],
  data() {
    return {};
  },
  methods: {
    handlerClick(e) {
      this.$emit("click", e);
    },
  },
};
</script>
<style lang='less' scoped>
.btn {
  padding: 0;
  width: 50%;
  height: 50px;
  border-radius: 25px;
  background-color: #ccc;
  margin: 20px auto;
  font-size: 20px;
  line-height: 50px;
}
.primary {
  color: #fff;
  background-color: blue;
}
.success {
  color: #fff;
  background-color: green;
}
.danger {
  color: #fff;
  background-color: red;
}
</style>